<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    class="flex-dialog"
    :width="setDialogWidth('1000px')"
    :visible="visible"
    @open="open"
    @close="close"
  >
    <template slot="title">
      <span class="mr-10 text-color">{{ $t('ALARM_SEVERITY_SETTING') }}</span>
      <el-popover width="200" trigger="hover" :content="$t('CHANGE_ALARM_SEVERITIES_TIPS')">
        <i slot="reference" class="iconfont icon-AFSwenhao" />
      </el-popover>
    </template>
    <div class="flex justify-end mb-10">
      <el-select
        v-model="alarmSource"
        style="width: 200px"
        clearable
        :placeholder="$t('ALARM_SOURCE')"
      >
        <el-option
          v-for="item in sourceList"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
      <el-select
        v-model="level"
        style="width: 200px"
        clearable
        class="ml-10"
        :placeholder="$t('ALARM_SEVERITY')"
      >
        <el-option
          v-for="item in dictList.ALARM_LEVEL"
          :key="item.value"
          :value="Number(item.value)"
          :label="item.label"
        />
      </el-select>
      <el-input
        v-model.trim="keyword"
        class="ml-10"
        style="width: 200px"
        maxlength="32"
        clearable
        :placeholder="$t('ALARM_TYPE') + '/' + $t('ALARM_DEFINITION')"
      />
      <el-button type="primary" class="ml-10" @click="$debounce(search)">
        {{ $t('QUERY') }}
      </el-button>
    </div>
    <el-table
      :key="tableData.length"
      ref="tableBox"
      class="w-100"
      :data="tableData"
      height="100%"
      size="mini"
      border
    >
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column type="index" :label="$t('SEQUENCE')" :width="resetSize(60)" align="center" />
      <el-table-column :label="$t('ALARM_TYPE')" prop="alarmName" />
      <el-table-column :label="$t('ALARM_SOURCE')" prop="sourceName" />
      <el-table-column :label="$t('ALARM_DEFINITION')" prop="alarmDesc" />
      <el-table-column :label="$t('ALARM_SEVERITY')">
        <template v-slot="scope">
          <el-select v-model="scope.row.alarmLevel">
            <el-option
              v-for="item in dictList.ALARM_LEVEL"
              :key="item.value"
              :value="Number(item.value)"
              :label="item.label"
            />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deepClone } from '@/utils/common'
  import alarmTypeApi from '@/api/basebiz/AlarmTypeApi'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        baseData: [],
        activeData: [],
        level: '',
        alarmSource: '',
        keyword: '',
        tableData: [],
        sourceList: []
      }
    },
    computed: {
      ...mapGetters(['dictList', 'dictMap'])
    },
    methods: {
      open() {
        this.tableData = []
        this.sourceList = []
        alarmTypeApi.page({ page: 1, size: 999 }).then(res => {
          const list = res.list || []
          const sourceList = []
          list.forEach(i => {
            const sourceName = this.dictMap.BIZ_MODULE[i.alarmSource] || ''
            const alarmName = this.$t('ALARM_TYPE_' + i.alarmCode) || ''
            i.sourceName = sourceName
            i.alarmName = alarmName
            i.alarmDesc = i.alarmDesc || ''
            if (!sourceList.some(j => j.value === i.alarmSource)) {
              sourceList.push({
                value: i.alarmSource,
                label: sourceName
              })
            }
          })
          this.sourceList = sourceList
          this.tableData = list
          this.baseData = deepClone(list)
          this.activeData = deepClone(list)
          this.$nextTick(() => {
            this.$refs.tableBox.doLayout()
          })
        })
      },
      search() {
        this.tableData = this.activeData.filter(
          i =>
            !(
              (this.alarmSource && i.alarmSource !== this.alarmSource) ||
              (this.level && i.alarmLevel !== this.level) ||
              (this.keyword &&
                !i.alarmName.includes(this.keyword) &&
                !i.alarmDesc.includes(this.keyword))
            )
        )
      },
      // 保存逻辑网段修改
      save() {
        const requestData = []
        this.tableData.forEach((i, index) => {
          const oldData = this.baseData.find(j => j.alarmCode === i.alarmCode)
          if (i.alarmLevel !== oldData.alarmLevel) {
            requestData.push(i)
          }
        })
        alarmTypeApi.batchLevelUpdate(requestData).then(res => {
          this.$message.success(this.$t('MODIFY_SUCCESS'))
          this.close(true)
        })
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

<style></style>
